<!-- 购物车页面 -->
<template>
  <v-layout column>
    <v-flex>
      <v-layout class="my-3 grey lighten-2" align-center>
        <v-flex xs1><v-checkbox label="全选" class="ma-0 pa-2" hide-details></v-checkbox></v-flex>
        <v-flex xs1></v-flex>
        <v-flex xs4 class="px-3"><h4>商品信息</h4></v-flex>
        <v-flex xs2 class=""><h4>单价</h4></v-flex>
        <v-flex xs2 class="text-xs-center"><h4>数目</h4></v-flex>
        <v-flex xs2 class="text-xs-right pr-5"><h4>总价</h4></v-flex>
      </v-layout>
    </v-flex>
    <v-flex v-for="item in itemData" :key="item.id">
      <v-layout class="my-1" align-center>
        <v-flex xs1>
          <v-checkbox v-model="selected" :value="item.id"></v-checkbox>
        </v-flex>
        <v-flex xs1><v-img :src="item.goods.cover" ></v-img></v-flex>
        <v-flex xs4 class="px-3"><span>{{item.goods.goods_name}}</span></v-flex>
        <v-flex xs2 class=""><span>¥{{item.goods.price}}</span></v-flex>
        <v-flex xs2 class="">
          <v-text-field type="number" min="1" step="1" :value="item.goods_count" box flat hide-details></v-text-field>
        </v-flex>
        <v-flex xs2 class="text-xs-right"><span>¥{{(item.goods_count * Number.parseFloat(item.goods.price)).toFixed(2)}}</span></v-flex>
      </v-layout>
    </v-flex>
    <v-flex class="text-xs-right">
      <v-btn color="primary" :disabled="selected.length === 0" large class="my-4" @click="onBtnShopCartSubmit"><h3>提交订单</h3> </v-btn>
    </v-flex>
  </v-layout>
</template>

<script>
import { buyerList } from '@/api/shop/shopCart.js'
export default {
  name: 'ShopCart',
  data: function () {
    return {
      itemData: [],
      selected: []
    }
  },
  created: function () {
    this.fetchData()
  },
  components: {},
  computed: {},
  methods: {
    fetchData: function () {
      buyerList().then(res => {
        this.itemData = res.data
      })
    },
    onBtnShopCartSubmit: function () {
      this.$router.push({ name: 'OrderSubmit', query: { selected: this.selected.join() } })
    }
  }
}
</script>
<style>
</style>
